<template>
	<view class="">
		<view class="distribution">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="color: #666666;font-size: 13px;">
					您有租房合同待填写
				</view>
				<view>
					<button style="font-size: 11px;" @click="signature">
						签名
					</button>
				</view>
			</view>
			<view style="display: flex;justify-content: center;">
				<image src="https://www.gzxwsz.com/profile/avatar/2024/11/18/230b5a561954c2ac8edaa52d4360caa5.png"
					mode="heightFix" style="height: 140px;"></image>
			</view>
			<view style="color: #333333;width: 150px;text-align: center;margin: 0 auto;font-size: 13px;">
				贵阳市花果山小区3-203 租房协议
			</view>
			<view class="">
				<button
					style="background-color: #FFDA00;font-size: 13px;width: 80px;margin-top: 10px;margin-bottom: 10px;">填写合同</button>
			</view>
			<view style="color: #999999;font-size: 11px;text-align: center;">
				本合同以国家《民法典》和市场监督管理总局《商品房屋租赁管理办法》为准拟订，合法合理，公平公正
			</view>
			<u-popup :show="show" @close="close" @open="open" closeable='true'>
				<view>
					<view style="text-align: center; margin-top: 20px;font-size: 14px;">
						签名
					</view>
					<view style="margin-top: 20px;padding:0 5px;">
						<view style="display: flex;justify-content: center;border: #FFDA00 2px solid;">
							<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
								boundingBox='true' backgroundColor='#F5F5F5' :openSmooth="openSmooth"></l-signature>
						</view>
					</view>
					<view style="display: flex;margin-top: 30px;margin-bottom: 10px;">
						<button style="width: 40vw;font-size: 14px;background-color: #ffffff;"
							@click="onClick('clear')">重新填写</button>
						<button style="width: 40vw;font-size: 14px;background-color: #FFDA00;"
							@click="onClick('save')">保 存</button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		urlHead
	} from "@/serve/serve.js" // 全局配置文件
	const action = ref(urlHead + '/common/upload')
	const show = ref(false);
	const signature = () => {
		console.log('签名')
		show.value = true
	}
	const close = () => {
		show.value = false;
		console.log(88888, '关闭')
		onClick('clear')
	}
	// 以下是签名
	const penSize = ref('5')
	const penColor = ref('red')
	const openSmooth = ref(true)
	const signatureRef = ref()
	const onClick = (type) => {
		if (type == 'openSmooth') {
			openSmooth.value = !openSmooth.value
			return
		}
		if (type == 'save') {
			signatureRef.value.canvasToTempFilePath({
				success: (res) => {
					// 是否为空画板 无签名
					console.log(res)
					uploadFilePromise(res.tempFilePath)
					// 生成图片的临时路径
					// H5 生成的是base64
					// this.url = res.tempFilePath
				}
			})
			return
		}
		if (signatureRef.value)
			signatureRef.value[type]()
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: action.value,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					console.log(JSON.parse(res.data).url, '图片')
					setTimeout(() => {
						resolve(JSON.parse(res.data).url);
					}, 1000);
				},
			});
		});
	}
</script>

<style scoped lang="scss">
	.distribution {
		width: calc(92vw - 16px);
		margin: 0 auto;
		background-color: #ffffff;
		padding: 13px 8px;
		border-radius: 10px;

		.ones {
			background-color: #F5E8E2;
		}

		.twos {
			background-color: #E6F0F1;
		}

		.threes {
			background-color: #E7EEF6;
		}
	}
</style>